import React, { Component } from 'react';
import './Login.scss'
import { user_login } from "../utils/api"
import { Toast } from 'antd-mobile'
class Login extends Component {
    constructor(props){
        super(props)
        this.state={
            phone:"",
            pass:"",
        }
    }
    handleChange(e){
        this.setState({
            [e.target.name] : (e.target.type === 'checkbox' || e.target.type === 'ardio') ? e.target.checked : e.target.value
        })
    }
    userLogin(){
        if(/^1[3-9]\d{9}$/.test(this.state.phone) == false ){
            Toast.show({
                icon: 'fail',
                content: '手机号码格式不正确',
            })
        }else if( /^\w{6}$/.test(this.state.pass) == false){
            Toast.show({
                icon: 'fail',
                content: '请输入6位数字,字母,下划线组成的密码',
            })
        }else{
            user_login(this.state).then((res)=>{
                console.log(res);
                if(res.data.code == 200){
                    localStorage.setItem('userinfo',JSON.stringify(res.data))
                    Toast.show({
                        icon: 'fail',
                        content: res.data.msg,
                    })
                    this.props.history.push('/index')
                }   
            })
        }
    }
    render() {
        return (
            <div className='login'>
                <div className='phone inputs'>
                    <i className='iconfont icon-zhanghao'></i>
                    <input type="text" name="phone" value={this.state.phone} onChange={(e)=>{this.handleChange(e)}} placeholder='请输入用户名' />
                </div>
                <div className='pass inputs'>
                    <i className='iconfont icon-mima'></i>
                    <input type="password" name="pass" value={this.state.pass} onChange={(e)=>{this.handleChange(e)}} placeholder='请输入密码' />
                </div>
                <div className='btn inputs' onClick={()=>{this.userLogin()}}>
                    登录
                </div>
                <div className='text' onClick={()=>{this.props.history.push('/Regsiter')}}>
                    注册
                </div>
            </div>
        );
    }
}

export default Login;